/**
 *  解决this指向问题的方案：(推荐的方式是那些)
      （推荐）1. 提前在构造函数中做this的绑定
      （推荐）2. 使用 public class fiedls 语法，结合箭头函数，直接定义事件处理函数
      3. 在 JSX 的地方，做 bind
      4. 在 JSX 的地方，提供一个 箭头函数作为事件处理函数，然后在箭头函数体内将 之前的函数当前普通函数来调用

    前置知识点：
      1. 父组件 render ，子组件一定会跟着 render
          子组件收到的 props 发生变化。
          他内部是比较相等比较 新旧 props。那这样不管props有没有变化都认为不是同一份，就render.
      2. 如何实现 props 没有变化时，让组件不 render
          让组件继承 PureComponent
          PureComponent 内部实现了 shouldComponentUpdate(我是否应该更新呢？) 这个生命周期钩子，
          在该钩子中比较了新旧props.比较方式是循环比较props中的属性。当所有属性的值没有变化时，就阻止更新。
          
 */

import { Component, PureComponent } from "react";

class Son extends PureComponent {
  state = {
    count: 1,
  };

  render() {
    console.log("Son render", this.props);

    const { count } = this.state;
    return (
      <div>
        <h2>Son</h2>
        <button
          onClick={() =>
            this.setState((newState) => ({ count: newState.count + 1 }))
          }
        >
          {count}
        </button>
      </div>
    );
  }
}

class App extends Component {
  state = {
    name: "小儿",
    age: 18,
  };

  constructor() {
    super();

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {}

  render() {
    console.log("App render");

    const { name, age } = this.state;

    return (
      <div>
        <h1>App</h1>
        <button onClick={() => this.setState((a) => ({ name: a.name + "~" }))}>
          {name}
        </button>
        <button onClick={() => this.setState((b) => ({ age: b.age + 1 }))}>
          {age}
        </button>

        <hr />

        <Son abcd={() => {}}></Son>
      </div>
    );
  }
}

export default App;
